<template>
  <view class="sdfdtty">
    <view class="kjhnderr pd pm20">
      <view class="drrttser row fz26 pd">
        <view class="col pr">
          <icon type="search" size="16" class="kkjsert cz"></icon>
          <input placeholder="课室号" class="sdfsdtyee" v-model="ksNumber" @change="ksChange"/>
        </view>
        <view class="ls dfgtye">
          <picker mode="date" @change="dertrety">
            <view>{{ uuhe ? uuhe : "年/月/日" }}</view>
          </picker>
        </view>
      </view>
    </view>
    <view class="pd pt20 pm20 fz24 z9">
      使用情况
      <view class="f_b ml20 dffgdgty">
        <text class="xdrrty cz"></text>
        空闲
      </view>
      <view class="f_b ml20 dffgdgty ab">
        <text class="xdrrty cz"></text>
        已占
      </view>
    </view>
    <uni-collapse>
      <uni-collapse-item
        v-for="(shijianduan,index) in timeList"
        :title="
          shijianduan.name +
          '(' +
          shijianduan.startTime +
          '-' +
          shijianduan.endTime +
          ')'
        "
        thumb="../../../static/img/gfdgfdga.png"
        :jhghgs="!!shijianduan.fieldStatus"
      >
      <view v-if="shijianduan.fieldStatus" class="pd fz30">
					<uni-list>
						<uni-list-item title="申请人" :rightText="shijianduan.fieldStatus.chargeName" :showArrow="false" thumb="../../../static/img/gfdgfdgb.png"></uni-list-item>
						<uni-list-item title="申请单位" :rightText="shijianduan.fieldStatus.unityName" :showArrow="false" thumb="../../../static/img/gfdgfdgc.png"></uni-list-item>
						<uni-list-item title="联系电话" :rightText="shijianduan.fieldStatus.phone" :showArrow="false" thumb="../../../static/img/gfdgfdgd.png"></uni-list-item>
						<uni-list-item title="申请设备" :rightText="shijianduan.fieldStatus.equipmentAmount" :showArrow="false" thumb="../../../static/img/gfdgfdge.png"></uni-list-item>
						<uni-list-item title="活动详情" :rightText="shijianduan.fieldStatus.purpose" :showArrow="false" thumb="../../../static/img/gfdgfdgf.png"></uni-list-item>
					</uni-list>
				</view>
      </uni-collapse-item>
    </uni-collapse>

    <view class="fz26 z9 pt20 pm20 pd">
      设备信息
    </view>
    <uni-collapse>
      <uni-collapse-item title="投影仪"  thumb="../../../static/img/sdfdsfa.png">
        <view class="fz30 z3 pd pt20 pm20">
          <view  v-for="(item) in projector" :key="item.brandModel" class="pt15 pm15">
            <image class="my-icon" src="../../../static/img/sb.png" mode="" /> 
            <text class="my-txt">型号: {{item.brandModel}}</text>
          </view>
        </view>
      </uni-collapse-item>
      <uni-collapse-item title="话筒"  thumb="../../../static/img/sdfdsfb.png">
        <view class="fz30 z3 pd pt20 pm20">
          <view v-for="(item) in microphone" :key="item.brandModel" class="pt15 pm15">
             <image class="my-icon" src="../../../static/img/sb.png" mode="" /> 
            <text class="my-txt">型号: {{item.brandModel}}</text>
          </view>
        </view>
      </uni-collapse-item>
      <uni-collapse-item title="音响"  thumb="../../../static/img/yx.png">
        <view class="fz30 z3 pd pt20 pm20">
          <view v-for="(item) in sound" :key="item.brandModel" class="pt15 pm15">
             <image class="my-icon" src="../../../static/img/sb.png" mode="" /> 
            <text class="my-txt">型号: {{item.brandModel}}</text>
          </view>
        </view>
      </uni-collapse-item>
      <uni-collapse-item title="空调"  thumb="../../../static/img/air.png">
        <view class="fz30 z3 pd pt20 pm20">
          <view v-for="(item) in air" :key="item.brandModel" class="pt15 pm15">
             <image class="my-icon" src="../../../static/img/sb.png" mode="" /> 
            <text class="my-txt">型号: {{item.brandModel}}</text>
          </view>
        </view>
      </uni-collapse-item>
    </uni-collapse>
    <uni-popup ref="popup" type="message">
      <uni-popup-message
        type="error"
        message="查询不到该课室"
      ></uni-popup-message>
    </uni-popup>
  </view>
</template>
<script>
export default {
  data() {
    return {
      uuhe: "",
      item: {},
      timeList: [],
      louInfo: {},
      sound: [],
      microphone:[],
      projector:[],
      air:[],
      ksNumber:''
    };
  },
  components: {},
  onLoad() {},
  methods: {
    
    dertrety(e) {
      this.uuhe = e.detail.value;
      this.getLouDetail(this.uuhe)
    },
    ksChange () {
      if(this.ksNumber > 100) {
        this.changeFloor(Math.floor(this.ksNumber/100))
      } else {

      }
    },
    changeFloor(floor) {
      this.curFloor = floor;
      this.ideer = floor;
      this.fieldClassroom();
    },
    async fieldClassroom() {
      this.fieldInfoList = [];
      let that = this;

      let res = await this.$api.fieldClassroom({
        fieldTypeId: this.pageQuery.fieldId,
        paramDate: this.uuhe,
        curFloor: this.curFloor,
      });
      console.log('========',res)
      if (res.code == 200) {
        let arr = res.data.fieldInfoList.filter(i=> {
          return i.name == this.ksNumber
        })
        if(arr[0]) {
          uni.setNavigationBarTitle({
            title: this.ksNumber
          });
          this.getLouDetail(this.uuhe, arr[0].id)
        } else {
          this.$refs.popup.open();
          setTimeout(()=> {
            this.$refs.popup.close();
          },1500)
        }
      }
    },
    async getFloor() {
      let that = this;
      let res = await this.$api.getFloor({
        fieldTypeId: this.pageQuery.fieldId,
      });
      if (res.code == 200) {
        that.floorNums = res.data.floorNums;
        if (that.floorNums.length) {
          that.curFloor = that.floorNums[0];
        }
      }
    },

    async getTime() {
      let res = await this.$api.fieldTypeTime(this.pageQuery.fieldTypeId);
      if (res.code == 200) {
        this.timeList = res.data;
      }
    },

    async getLouDetail(date, id) {
      this.getTime();
      let queryDate = date || this.uuhe;
      let res = await this.$api.fieldClassroomInfo(this.pageQuery.fieldId, {queryDate:queryDate});
      if (res.code == 200) {
        this.louInfo = res.data;

        this.timeList = this.timeList.map(i=> {
          this.louInfo.fieldStatusList.forEach(j=> {
            if(i.name == j.timeQuantumName) {
              var newArr = eval(j.equipmentAmount)
              let eString = ''
              console.log(newArr)
              newArr.forEach(k=> {
                eString += (k.name+':' +k.amount+'  ')
              })
              j.equipmentAmount = eString
              i.fieldStatus = j
            }
          })
           return i
        })

        this.air = this.louInfo.equipmentList.filter(i=> {
          return i.name == '空调'
        })

        this.microphone = this.louInfo.equipmentList.filter(i=> {
          return i.name == '话筒'
        })

        this.projector = this.louInfo.equipmentList.filter(i=> {
          return i.name == '投影仪'
        })

        this.sound = this.louInfo.equipmentList.filter(i=> {
          return i.name == '音响'
        })
      }
    },
  },
  mounted() {
    let item = JSON.parse(this.pageQuery.item);
    uni.setNavigationBarTitle({
      title: item.name,
    });
    this.item = item;

    this.uuhe = this.pageQuery.queryDate;
    this.getLouDetail();
  },
};
</script>
<style>
.sdfdtty .uni-list {
  background: transparent !important;
}
</style>
<style scoped>
.pt15.pm15 {
  border-bottom: 2upx solid #d2d2d2;
}

.pt15.pm15:last-child{
  border-bottom: 0;
}
.xdrrty {
  width: 30upx;
  height: 30upx;
  border-radius: 50%;
  background: #00c656;
  display: inline-block;
  margin-right: 10upx;
}

.dffgdgty {
  color: #00c656;
}

.dffgdgty.ab {
  color: rgba(252, 10, 10, 1);
}

.dffgdgty.ab .xdrrty {
  background: rgba(252, 10, 10, 1);
}

.my-icon {
  display: inline-block ;
  width: 50upx;
  height: 50upx;
  vertical-align: middle;
}

.my-txt {
  margin-left: 20upx;
  display: inline-block;
  line-height: 50upx;
  vertical-align: middle;
}
</style>
